<template>
<div class="workflow-permissions">
    <el-card v-for="permission in permissions" :key="permission.id" class="permission-card">
    <h3>{{ permission.workflow_name }}</h3>
    </el-card>
</div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import { ElCard } from 'element-plus';

// 定义响应式变量来存储工作流权限数据
const permissions = ref([]);

var token = localStorage.getItem('token');
var base64Url = token.split('.')[1]; // 得到载荷部分
var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/'); // 替换URL安全的Base64字符
var jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
          return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
      }).join(''));
console.log(jsonPayload); // 这将输出载荷部分的JSON字符串
print("-----------")

// 从后端获取工作流权限数据
const fetchWorkflowPermissions = async () => {
try {
    // 发送GET请求到后端API获取工作流权限数据
    const response = await axios.get('http://127.0.0.1:8000/user/wfpm/');
    console.log(response);
    // 将获取的数据赋值给permissions
    permissions.value = response.data;
} catch (error) {
    console.error('获取工作流权限失败:', error);
}
};

// 在组件挂载后获取工作流权限数据
onMounted(() => {
fetchWorkflowPermissions();
});
</script>

<style scoped>
.workflow-permissions {
display: flex;
flex-wrap: wrap;
gap: 20px;
padding: 20px;
}

.permission-card {
width: 300px;
border: 1px solid #ebeef5;
border-radius: 4px;
overflow: hidden;
}

.permission-card h3 {
margin: 0;
padding: 15px;
background-color: #f5f7fa;
}

.permission-card p {
margin: 0;
padding: 10px;
color: blue;
}
</style>